<template>
    <div class="findMusic">
        <div class="index_nav">
            <router-link :to="item.tolink" tag="span" v-for="item in right_nav" :key="item.id">
                <p class="in_nav">{{item.name}}</p>
            </router-link>
        </div>

        <!-- 发现音乐内容部分 -->
        <router-view></router-view>
    </div>
</template>

<script>

export default {
    data() {
        return {
        // 主页导航
        right_nav:[
            { id:1, name:"个性推荐", tolink: "/findMusic/special" }, 
            { id:2, name:"歌单", tolink: "/findMusic/musiclist" }, 
            { id:3, name:"排行榜", tolink: "/findMusic/musiccharts" },
            { id:4, name:"歌手", tolink: "/findMusic/musicsinger" },
            { id:5, name:"最新音乐", tolink: "/findMusic/newmusic" },
            { id:6, name:"主播电台", tolink: "/findMusic/zhuboFM" },
        ],
        }
    },
}
</script>

<style scoped>
.findMusic{ width: 100%; background-color: #16181c;}
.index_nav{ width: 600px; height: 48px; margin-left: auto; margin-right: auto; display:flex; justify-content: center; }
.index_nav span { height: 40px; }
.in_nav{ float:left; width: 100px; cursor: pointer; line-height:40px; text-align:center; color: #a3a4a5; font-size: 14px; }

/* 路由高亮 */
.mui-active{ border-bottom: 2px solid #404245 }
</style>